<template>
  <div>
    <h3>电影列表</h3>
    <h3 style="color: blue">Calculate 组件求和结果：{{ sum }}</h3>
    <h3>列表中第一个电影名是：{{ firstMovieName }}</h3>
    <input type="text" placeholder="请输入电影名称" v-model="name" />
    <button @click="addMovie">添加电影名称</button>
    <button @click="addMovieLang">添加带【狼】的电影名称</button>
    <button @click="addMovieServer">添加服务器返回的电影名称</button>
    <ul>
      <li v-for="m in movieList" :key="m.id">{{ m.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Movie",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    //电影名集合
    movieList() {
      return this.$store.state.movieModule.movieList;
    },
    //获取求和的结果
    sum() {
      return this.$store.state.calculateModule.sum;
    },
    //getters 的模块化编码方式，带模块名和斜杠/
    firstMovieName() {
      return this.$store.getters["movieModule/firstMovieName"];
    },
  },
  methods: {
    addMovie() {
      let randomId = Math.random().toString(36).substring(2, 9);
      const movieObj = { id: randomId, name: this.name };
      this.$store.commit("movieModule/ADD_MOVIE", movieObj);
      this.name = "";
    },
    //带【狼】字电影名的判断
    addMovieLang() {
      let randomId = Math.random().toString(36).substring(2, 9);
      const movieObj = { id: randomId, name: this.name };
      this.$store.dispatch("movieModule/addMovieLang", movieObj);
      this.name = "";
    },
    //从服务器中获取数据
    addMovieServer() {
      this.$store.dispatch("movieModule/addMovieServer");
    },
  },
};
</script>

<style>
</style>